<template>
	<view class="point-mall_page">
    <mvBar :mysNavConfig="mysNavConfig"></mvBar>
    <view class="bg-img"><image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/recharge-bg.png"></image></view>
    <view class="total-point">
      <p class="title">可用积分</p>
      <p class="num"><text>{{userInfo.pointBalance}}</text>分</p>
    </view>
    <view class="shop-list" v-if="dataList.length>0">
      <view class="point-mall_content">
        <view class="shop-title">积分好礼</view>
        <view class="mall_item">
          <view class="item" v-for="p in dataList" :style="dataList.length < 2 ? 'width:100%' : 'width:48%'">
            <!-- <view class="type-img"><image src="../../static/icon-top.png" mode=""></image></view> -->
            <view :class="p.giftType == 2 ? 'ticket' : 'kind'">
              <!-- <view class="title">
                              <view v-if="p.giftType == 2">兑换券</view>
                              <view v-else>实物</view>
                          </view> -->
              <view class="img">
                <image style="width: 100%;" v-if="!p.imageUrl"
                       src="http://wx.xiongmaovip.com/miniapp/static/personal-center/coupon.png" mode=""></image>
              </view>
              <view class="mall_img" v-if="p.imageUrl">
                <image :src="p.imageUrl" :alt="p.giftName"></image>
              </view>
              <view class="mall_name">
                <text>{{ p.giftName }}</text>
              </view>
              <view class="mall_money">
                <text>{{ p.needPoint }}积分</text>
                <view class="btn" @click="details(p)">兑换</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
		<view class="hint" v-else>暂无数据!</view>
    <uni-popup ref="stationRef" borderRadius="24rpx 24rpx 0 0" type="bottom" background-color="#FFFFFF" @close="onClose">
      <view class="stations-panel">
        <view class="title">请选择兑换的站点</view>
        <view v-for="item in stationList">
          <label class="station-item" @click="handleChoseStation(item)">
            <radio :value="item.stationId" :checked="item.stationId === currentStationId" color="#006241" />
            <view class="stationName">{{item.stationName}}</view>
            <view class="total">库存：{{item.stock || '无'}}</view>
          </label>
        </view>
        <view class="btn" @click="handleConfirm()">兑换</view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
import {
  getGiftStationList,
  giftList
} from '@/api/index.js';
  import mvBar from "@/components/mysNavBar.vue";
	export default {
    components: {mvBar},
    data() {
      return {
        mysNavConfig: {
          navPadding: true,
          isHome: false,
          navFixed: true,
          navTitle: {
            text: "积分商城",
            color: "#FFFFFF",
            fontSize: "34upx", // px upx rpx
            fontWeight: "500", // blod
          },
          leftIconPath: '/static/header/back.png',
        },
				param: {
					pageNum: 1,
					pageSize: 50
				},
				totalPage: 1,
				dataList: [],
        stationList: [],
        currentStationId: '',
        currentStationName: '',
        currentGift: '',
        currentGiftId: '',
        userInfo: ''
			};
		},
		onLoad() {
			this.dataList = [];
			this.queryGroupGiftList();
      this.userInfo = JSON.parse(uni.getStorageSync('memberInfo'))
      console.log(this.userInfo)
      // this.getStationList()
		},
		onPullDownRefresh() {
			this.param.pageNum = 1;
			this.dataList = [];
      this.queryGroupGiftList();
		},
		onReachBottom() {
			if (this.param.pageNum < this.totalPage) {
				this.param.pageNum += 1;
				this.queryGroupGiftList();
				return;
			}
			uni.showToast({
				title: '没有更新的数据啦...',
				icon: 'none',
				duration: 1000
			});
		},
		methods: {
			queryGroupGiftList() {
				uni.stopPullDownRefresh();
				giftList(this.param).then(res => {
						if (res.length > 0) {
							// this.totalPage = res.data.totalPage;
							this.dataList = res
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			//兑换
			details(e) {
        this.currentGift = e
        this.currentGiftId = e.giftId
        this.getStationList(e.giftId)
        this.$refs.stationRef.open();
			},
      async getStationList(giftId) {
        const params = {
          giftId,
        }
        const res = await getGiftStationList({...params})
        this.stationList = res
      },
      handleChoseStation(d){
        this.currentStationId = d.stationId
        this.currentStationName = d.stationName
      },
      handleConfirm(){
        if (!!this.currentStationId){
          uni.navigateTo({
            url: `./ticketDetails?data=${JSON.stringify(this.currentGift)}&stationId=${this.currentStationId}&stationName=${this.currentStationName}`
          });
        }else {
          uni.showToast({
            title: '请选择兑换的站点',
            icon: 'error'
          })
        }
      },
      onClose(){
        this.currentStationId = ''
      }
		}
	};
</script>

<style lang="scss">
	.point-mall_page {
		position: relative;
    box-sizing: border-box;
		// background: #f5f5f5;
		font-size: 32rpx;
    .bg-img{
      width: 100%;
      height: 420upx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      image{
        width: 100%;
        height: 100%;
      }
    }

    .stations-panel{
      width: 100%;
      min-height: 300upx;
      background: #FFFFFF;
      padding: 32upx 24upx 120upx;
      border-radius: 24upx 24upx 0 0;
      box-sizing: border-box;
      overflow-y: scroll;
      .btn{
        width: 700upx;
        height: 88upx;
        border-radius: 80upx;
        text-align: center;
        line-height: 88upx;
        font-size: 32upx;
        background: #006241;
        position: absolute;
        bottom: 12upx;
        left: 50%;
        color: #FFFFFF;
        transform: translateX(-50%);
      }
      .title{
        font-size: 28upx;
        width: 100%;
        text-align: center;
        margin-bottom: 36upx;
      }
      .station-item{
        margin-top: 24upx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .stationName{
          font-size: 28upx;
          font-weight: 500;
          margin-left: 24upx;
          flex: 1;
        }
        .total{
          font-size: 24upx;
          color: #9D9D9D;
        }
      }
    }
    .total-point{
      padding: 32upx 48upx;
      color: #FFFFFF;
      font-size: 28upx;
      line-height: 44upx;
      .title{
        font-weight: 500;
      }
      .num{
        margin-top: 24upx;
        text{
          font-size: 48upx;
          margin-right: 16upx;
          font-weight: 700;
        }
      }
    }

    .shop-list{
      width: 100%;
      box-sizing: border-box;
      padding: 0 18upx;

      .point-mall_content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 24upx;
        background: #FFFFFF;
        padding-top: 32upx;
        overflow-y: scroll;
        height: calc(100vh - 380rpx);

        .shop-title{
          font-size: 36upx;
          font-weight: 500;
          color: #1B1B1B;
          text-align: center;
          margin-bottom: 36upx;
          width: 100%;
        }

        .mall_item {
          width: 100%;
          // background-color: #ff4d4f;
          padding: 24rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;

          .item {
            background: #F9F9F9;
            box-shadow: 0 4rpx 16rpx 0px rgba(0, 0, 0, 0.02);
            border-radius: 16rpx;
            margin-bottom: 10rpx;
            border: 1px solid #F0F1F2;
            box-sizing: border-box;
            text-align: center;
            position: relative;
            overflow: hidden;

            .ticket {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              position: relative;

              .title {
                position: absolute;
                transform: rotate(-45deg);
                top: 6rpx;
                left: -14rpx;
                font-size: 28rpx;
                color: #c0c0c0;
              }

              .mall_img {
                // width: 100%;
                height: 250rpx;
                // height: 200rpx;

                image {
                  max-width: 100%;
                  height: 100%;
                }
              }

              .mall_name {
                font-size: 30rpx;
                font-weight: 500;
                color: #333333;
                line-height: 42rpx;
                padding: 16rpx 24rpx 24rpx 24rpx;
              }

              .mall_money {
                display: flex;
                justify-content: space-around;

                padding-bottom: 24rpx;

                text {
                  font-size: 28rpx;
                  font-weight: 500;
                  color: #C2A661;
                  line-height: 44rpx;
                }

                .btn {
                  width: 96rpx;
                  height: 44rpx;
                  background: #006241;
                  border-radius: 32rpx;
                  font-size: 24rpx;
                  font-weight: 500;
                  color: #ffffff;
                  line-height: 44rpx;

                  &:active {
                    color: white;
                    background-color: #006241;
                  }
                }
              }
            }

            .kind {
              position: relative;

              .title {
                position: absolute;
                transform: rotate(-45deg);
                top: 2rpx;
                left: -6rpx;
                font-size: 28rpx;
                color: #c0c0c0;
              }

              .mall_img {
                width: 100%;
                // width: 344rpx;
                // height: 344rpx;
                height: 250rpx;

                image {
                  max-width: 100%;
                  height: 100%;
                }
              }

              .mall_name {
                padding: 16rpx 24rpx 24rpx 24rpx;
                font-size: 30rpx;
                font-weight: 500;
                color: #333333;
                line-height: 42rpx;
              }

              .mall_money {
                padding-bottom: 24rpx;
                font-size: 28rpx;
                font-weight: 500;
                color: #C2A661;
                line-height: 44rpx;
              }
            }
          }

          .type-img {
            width: 160rpx;
            height: 160rpx;
            transform: rotate(-74deg);
            position: absolute;
            left: -42rpx;
            top: -42rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .mall_item::after {
          content: '';
          width: 48%;
        }
      }
    }

		.hint {
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 42rpx;
			color: #c0c0c0;
			letter-spacing: 10rpx;
		}
	}
</style>